<template>

  <div
    style="font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
background: #FFFFFF;height: 150px;">
    <div style="position: relative;top: 35px;padding-left: 150px;">
      <el-image
        class="head-img-style"
        :src="temp_person.student_imagepath"
        fit="fill"></el-image>
      <i class="el-icon-edit" @click="handleinfo1"></i>
      <p v-if="!student_name_edit" style="margin: 0;position:relative;padding-left: 180px;height: 50px;
  top: 50px;font-weight: bolder;font-size: 35px;">{{ temp_person.student_name }}
        <i @click="student_name_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 30px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" style="z-index: 1;margin: 0;position:relative;padding-left: 150px;
  top: 50px;height: 50px;" v-if="student_name_edit" ref="temp_edit_person" :model="temp_edit_person" label-width="80px">
        <el-form-item class="edit-item-style" label="姓名" prop="student_name">
          <el-input v-model="temp_edit_person.student_name"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="student_name_edit = false;temp_edit_person = JSON.parse(JSON.stringify(temp_person))">取 消
          </el-button>
          <el-button type="primary" @click="editHandle('temp_edit_person',temp_edit_person);student_name_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <p class="title-style" style="left: -100px;">学号</p>
      <p class="content-text-style">{{ temp_person.student_id }} </p>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">性别</p></div>
      <p v-if="!sex_edit" class="content-text-style">{{ temp_person.sex }}
        <i @click="sex_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form class="form-text-style" v-if=" sex_edit " ref="temp_edit_person" :model="temp_edit_person"
               label-width="80px">
        <el-form-item class="edit-item-style" label="性别" prop="sex">
          <el-select v-model="temp_edit_person.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="sex_edit = false;temp_edit_person = JSON.parse(JSON.stringify(temp_person))">取 消
          </el-button>
          <el-button type="primary" @click="editHandle('temp_edit_person',temp_edit_person);sex_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">所属大学</p></div>
      <p v-if="!college_edit" class="content-text-style">{{ temp_person.college }}
        <i @click="college_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" college_edit " ref="temp_edit_person" :model="temp_edit_person"
               label-width="80px">
        <el-form-item class="edit-item-style" label="大学名称" prop="college">
          <el-input v-model="temp_edit_person.college"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="college_edit = false;temp_edit_person = JSON.parse(JSON.stringify(temp_person))">取 消
          </el-button>
          <el-button type="primary" @click="editHandle('temp_edit_person',temp_edit_person);college_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">专业</p></div>
      <p v-if="!major_edit" class="content-text-style">{{ temp_person.major }}
        <i @click="major_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" major_edit " ref="temp_edit_person" :model="temp_edit_person"
               label-width="80px">
        <el-form-item class="edit-item-style" label="专业" prop="major">
          <el-input v-model="temp_edit_person.major"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="major_edit = false;temp_edit_person = JSON.parse(JSON.stringify(temp_person))">取 消
          </el-button>
          <el-button type="primary" @click="editHandle('temp_edit_person',temp_edit_person);major_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">班级</p></div>
      <p v-if="!student_class_edit" class="content-text-style">{{ temp_person.student_class }}
        <i @click="student_class_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" student_class_edit " ref="temp_edit_person" :model="temp_edit_person"
               label-width="80px">
        <el-form-item class="edit-item-style" label="班级" prop="student_class">
          <el-input v-model="temp_edit_person.student_class"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="student_class_edit = false;temp_edit_person = JSON.parse(JSON.stringify(temp_person))">取
            消
          </el-button>
          <el-button type="primary" @click="editHandle('temp_edit_person',temp_edit_person);student_class_edit=false">确
            定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">个人邮箱</p></div>
      <p v-if="!personal_email_edit" class="content-text-style">{{ temp_person.personal_email }}
        <i @click="personal_email_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" personal_email_edit " ref="temp_edit_person" :model="temp_edit_person"
               label-width="80px">
        <el-form-item class="edit-item-style" label="个人邮箱" prop="personal_email">
          <el-input v-model="temp_edit_person.personal_email"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="personal_email_edit = false;temp_edit_person = JSON.parse(JSON.stringify(temp_person))">取
            消
          </el-button>
          <el-button type="primary" @click="editHandle('temp_edit_person',temp_edit_person);personal_email_edit=false">确
            定
          </el-button>
        </div>
      </el-form>
    </div>

    <div style="margin-top: 240px;">
      <el-button class="sent_button" @click="handleinfo()">上传简历</el-button>
      <el-button class="sent_button" @click="new DownInfo()">下载简历</el-button>
    </div>

  </div>


  <!--  <el-descriptions class="student_info" title="学生个人信息" direction="vertical" :column="3" border>-->
  <!--    <el-descriptions-item label="学号">{{temp_person.student_id}}</el-descriptions-item>-->
  <!--    <el-descriptions-item label="姓名">{{temp_person.student_name}}</el-descriptions-item>-->
  <!--    <el-descriptions-item label="性别" :span="2">{{temp_person.sex}}</el-descriptions-item>-->
  <!--    <el-descriptions-item label="大学">{{temp_person.college}}</el-descriptions-item>-->
  <!--    <el-descriptions-item label="专业">{{temp_person.major}}</el-descriptions-item>-->
  <!--    <el-descriptions-item label="班级">{{temp_person.student_class}}</el-descriptions-item>-->
  <!--    <el-descriptions-item label="个人邮箱" :span="2">{{temp_person.personal_email}}</el-descriptions-item>-->
  <!--  </el-descriptions>-->

  <!--  <el-button class="sent_button" @click="handleEdit()">编辑</el-button>-->

  <!--  公告文件上传-->
  <el-dialog title="上传文件(只上传文件列表的第一个)" v-model="student_file_dialogVisible">
    <!--    <button @click="change" class="up_button_style">选择文件</button>-->
    <div v-if="!addImg">
      <!--      <el-upload-->
      <!--        class="my-uploadPic"-->
      <!--        :multiple="multiple"-->
      <!--        action="/uploadPics"-->
      <!--        accept=".doc,.docx"-->
      <!--        :auto-upload="false"-->
      <!--        :http-request="uploadFile"-->
      <!--        ref="uploadPic">-->
      <!--        <i class="el-icon-plus"></i>-->
      <!--      </el-upload>-->

      <el-upload
        class="upload-demo"
        accept=".doc,.docx"
        drag
        :auto-upload="false"
        :http-request="uploadFile"
        action="/uploadPics"
        ref="uploadPic"
        :multiple="multiple">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <template #footer>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSomePeoplePicsForm">开始上传</el-button>
      </span>
    </template>
  </el-dialog>

  <!--  图片相关-->
  <el-dialog title="上传图片(只上传图片列表的第一个)" v-model="student_file_dialogVisible1">
    <!--    <button @click="change" class="up_button_style">选择文件</button>-->
    <div v-if="!addImg">
      <!--      <el-upload-->
      <!--        class="my-uploadPic"-->
      <!--        :multiple="multiple"-->
      <!--        action="/uploadPics"-->
      <!--        accept=".doc,.docx"-->
      <!--        :auto-upload="false"-->
      <!--        :http-request="uploadFile"-->
      <!--        ref="uploadPic">-->
      <!--        <i class="el-icon-plus"></i>-->
      <!--      </el-upload>-->

      <el-upload
        class="upload-demo"
        accept=".jpg"
        drag
        :auto-upload="false"
        :http-request="uploadFile"
        action="/uploadPics"
        ref="uploadPic"
        :multiple="multiple">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <template #footer>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSomePeoplePicsForm1">开始上传</el-button>
      </span>
    </template>
  </el-dialog>

  <!--  <el-dialog title="学生信息" v-model="editDialogFormVisible">-->
  <!--    <el-form :model="temp_person">-->
  <!--      <el-form-item label="姓名">-->
  <!--        <el-input v-model="temp_person.student_name"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="性别">-->
  <!--        <el-input v-model="temp_person.sex"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="大学">-->
  <!--        <el-input v-model="temp_person.college"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="专业">-->
  <!--        <el-input v-model="temp_person.major"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="班级">-->
  <!--        <el-input v-model="temp_person.student_class"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="个人邮箱">-->
  <!--        <el-input v-model="temp_person.personal_email"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item>-->
  <!--        <el-button @click="editDialogFormVisible = false">取消</el-button>-->
  <!--        <el-button type="primary" @click="editHandle()">确定</el-button>-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--  </el-dialog>-->


</template>

<script>
import UpS from '@/components/UploadStudentFile'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'stu_info',
  components: { UpS },
  data () {
    return {
      editDialogFormVisible: false,
      infoVisible: false,
      persons: [],
      temp_person: {
        college: '',
        major: '',
        personal_email: '',
        sex: '',
        student_class: '',
        student_file_id: '',
        student_infor_examine: '',
        student_name: '',
        student_table_id: '',
        student_id: '',
        student_imagepath: ''
      },
      temp_edit_person: {
        college: '',
        major: '',
        personal_email: '',
        sex: '',
        student_class: '',
        student_file_id: '',
        student_infor_examine: '',
        student_name: '',
        student_table_id: '',
        student_id: '',
        student_imagepath: ''
      },
      username: localStorage.getItem('username'),

      college_edit: '',
      major_edit: '',
      personal_email_edit: '',
      sex_edit: '',
      student_class_edit: '',
      student_name_edit: '',

      //学生文件上传相关
      formPicsData: '',
      multiple: true,
      activity: {
        StudentID: '',
      },
      addImg: false,
      student_file_dialogVisible: false,
      activity1: {
        UserID: '',
      },
      student_file_dialogVisible1: false, //头像相关

      rules: {
        student_name: [
          {
            required: true,
            message: '不能输入空！',
            trigger: 'blur'
          },
        ],
        college: [
          {
            required: true,
            message: '不能输入空！',
            trigger: 'blur'
          },
        ],
        major: [
          {
            required: true,
            message: '不能输入空！',
            trigger: 'blur'
          },
        ],
        student_class: [
          {
            required: true,
            message: '不能输入空！',
            trigger: 'blur'
          },
        ],
        personal_email: [
          {
            required: true,
            message: '不能输入空！',
            trigger: 'blur'
          },
        ]
      }

    }
  },
  methods: {
    handleinfo () {
      this.student_file_dialogVisible = true
      //console.log(row.notice_id)
      //localStorage.setItem('this_notice_id', row.notice_type)
      this.activity.StudentID = this.temp_person.student_id
      //console.log(row.notice_type)
    }
    ,
    handleinfo1 () {
      this.student_file_dialogVisible1 = true
      this.activity1.UserID = this.temp_person.student_id
    },
    uploadFile (file) {
      this.formPicsData.append('files', file.file)
      // console.log(file.file)
      // console.log(this.formPicsData)
      // console.log(1)
    },
    addSomePeoplePicsForm () {
      console.log('开始上传')
      let self = this
      this.formPicsData = new FormData()
      this.formPicsData.append('content', '123')
      for (let key in this.activity) {
        this.formPicsData.append(key, this.activity[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit()
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let _this = this
      //this.$ajax.post这个地方需要在main.js进行简单配置
      axios.post('http://localhost:8080/uploadfileStudent', _this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
        _this.$message.success('上传成功!')
        _this.student_file_dialogVisible = false
        _this.formPicsData = ''
      }).catch(res => {
        //this.$message.error("服务器走丢了!");
        _this.$message.error('上传失败!')
      })
      //this.$message.success("上传成功!");
      // this.$router.go(0)

    },

    addSomePeoplePicsForm1 () {
      //console.log('开始上传')
      let self = this
      this.formPicsData = new FormData()
      this.formPicsData.append('content', '123')
      for (let key in this.activity1) {
        this.formPicsData.append(key, this.activity1[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit()
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let _this = this
      //this.$ajax.post这个地方需要在main.js进行简单配置
      axios.post('http://localhost:8080/uploadImageUser', _this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
        _this.$message.success('上传成功!')
        _this.student_file_dialogVisible1 = false
        _this.formPicsData = ''
      }).catch(res => {
        //this.$message.error("服务器走丢了!");
        _this.$message.error('上传失败!')
      })
      //this.$message.success("上传成功!");
      // this.$router.go(0)

    },

    DownInfo () {
      var _this = this
      console.log(_this.username)
      window.open('http://localhost:8080/StudentFile?StudentID=' + localStorage.getItem('username'))
    },
    handleEdit () {
      this.editDialogFormVisible = true
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    editHandle (fromName, formData) {
      let _this = this
      formData.student_infor_examine = '已审核'
      _this.$refs[fromName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8080/Edit_Student_infor', formData)
            .then(function (response) {
              _this.temp_person = JSON.parse(JSON.stringify(formData))
            })
            .catch(function (error) {
              console.log(error)
            })
          //_this.editDialogFormVisible = false
        } else {
          ElMessage.error('请输入正确格式！')
          _this.temp_edit_person = JSON.parse(JSON.stringify(_this.temp_person))
          console.log('error submit!!')
          return false
        }
      })
    },
    find_person () {
      for (let i in this.persons) {

        if (this.persons[i].student_id === eval(this.username)) {
          this.temp_person = this.persons[i]
        }

      }
      // console.log(this.temp_person);
    }
  },
  created () {
    var _this = this
    axios.get('http://localhost:8080/Get_Student_infor')
      .then(function (response) {

        _this.persons = response.data

        axios.post('http://localhost:8080//FindUserImage?UserID=' + eval(_this.username))
          .then(function (response1) {
            _this.find_person()
            console.log(response1.data)
            const temp = response1.data.student_imagepath.substr(17)
            _this.temp_person.student_imagepath = require('E:/job/UserImage/' + temp)
            _this.temp_edit_person = JSON.parse(JSON.stringify(_this.temp_person))

          })
          .catch(function (error) {
            console.log(error)
          })

        _this.find_person()

      })
      .catch(function (error) {
        console.log(error)
      })
    this.editDialogFormVisible = false
  }

}
</script>

<style scoped>
.student_info {
  position: relative;
  width: 95%;
  left: 2.5%;
  top: 300%;
  font-family: arial, verdana, helvetica, 'PingFang SC', 'HanHei SC', STHeitiSC-Light, Microsoft Yahei, sans-serif;
}

.sent_button {
  position: relative;
  left: 78%;
  top: 5%;
}

.head-img-style {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  float: left;
  border-style: solid;
  border-color: #787878;
  border-width: 5px;
}

.el-icon-edit:hover {
  cursor: pointer;
  color: #6ba3ff !important;
}

.edit-item-style {
  height: 50px;
  margin: 0 10px 0 0;
  float: left;
}

.content-style {
  width: 70%;
  background: #FFFFFF;
  height: 75px;
  position: relative;
  top: 180px;
  margin-left: 200px;
  padding-left: 50px;
  border-radius: 20px;
  margin-bottom: 35px;
}

.title-style {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bolder;
  margin: 0;
  height: 50px;
  font-size: 30px;
  position: relative;
  top: 15px;
  right: 40px;
  float: left;
}

.content-text-style {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  margin: 0;
  height: 50px;
  font-size: 20px;
  position: relative;
  top: 25px;
  left: 20px;
}

.form-text-style {
  z-index: 1;
  margin: 0;
  position: relative;
  padding-left: 125px;
  top: 20px;
  height: 50px;
}
</style>
